<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            padding-bottom: 800px;
            padding-left: 30px;
        }
        svg{
            border: 1px solid black;
        }
    </style>
</head>

<body>
    <!-- 
        HTML attribute  在标签上定义的属性 
        DOM property 标签转换成JS DOM 对象的包含的属性
            + HTML 标签属性通过 IDL 接口可以将值映射到 对应DOM的属性上
    -->
    <textarea id="a" cols="30" rows="10">默认数据</textarea>
    <br>
    <div id="app">
        <!-- 
        // v-bind 可以自动识别属性进行合理的绑定
        * `.prop` - 将一个绑定强制设置为一个 DOM property。
        * `.attr` - 将一个绑定强制设置为一个 HTML attribute。
        -->
        <p>selValue:{{ selValue }}</p>
        <select>
            <option value="A" :selected=" selValue=='A' ">A</option>
            <option value="B" :selected=" selValue=='B' ">B</option>
            <option value="C" :selected=" selValue=='C' ">C</option>
            <option value="D" :selected=" selValue=='D' ">D</option>
            <option value="E" :selected=" selValue=='E' ">E</option>
        </select>
        <!-- <select :value.prop="selValue"> -->
        <!-- <select :value.attr="selValue"> -->
        <select :value="selValue">
            <option value="A">A</option>
            <option value="B">B</option>
            <option value="C">C</option>
            <option value="D">D</option>
            <option value="E">E</option>
        </select>

        <!-- 
            .camel 【vue2.6^】 - 只对svg标签实现将 kebab-case attribute 名转换为 camelCase。
        -->
        <p :testName=" 'itany' ">testName</p>
        <p :test-name=" 'itany' ">testName</p>
        <p :test-name.camel=" 'itany' ">testName</p>
        <img src="../assets/img/svg.svg" alt="" srcset="">
        <br><br>
        <!-- <svg :viewBox=" `0 0 ${x} ${y}` " width="300" height="200"> -->
        <svg :view-box.camel=" `0 0 ${x} ${y}` " width="300" height="200">
            <circle cx="100" cy="100" r="80" fill="green" />
        </svg>
        <div>
            x:{{x}}: <input type="range" min="100" max="300" step="10" :value="x" @input="x=$event.target.value">
        </div>
        <div>
            y:{{y}}: <input type="range" min="100" max="200" step="10" :value="y" @input="y=$event.target.value">
        </div>
    </div>
    <script type="module">
        // 加载 Vue3 的ESM 模块文件
        import { createApp } from "../assets/vue3/vue.esm-browser.js"
        createApp({
            data() {
                return {
                    selValue: "B",
                    x:300,
                    y:200
                }
            }
        }).mount("#app")
    </script>
</body>

</html>